<template>
	<view class="page">
		<view class="head">
			<view class="ava_area">
				<image :src="userInfo.avatarUrl" mode="" class="ava"></image>
			</view>
			<view class="ID_area">
				{{userInfo.nickName}}
				<text>4444444@.com</text> 
				<text>专业卖XXX</text>
			</view>
		</view>
		<view class="body">
			<view class="introduce">
				我的商品
			</view>
			<view class="lineintro"></view>
			<view class="stuff">
				<view class="stuffframe" v-for="(item,index) in productionList" @click="gomct(item)">
					<image :src="item.coverImg" mode="" class="stuffimg"></image>
					<view class="introarea">
						<view class="price">
							￥{{item.price}}
						</view>
						<view class="comname">
							{{item.productionName}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageSize: 10,
				pageIndex:1,
				productionList:[],
				userInfo:'',
			}
		},
		mounted(){
			this.getList();
		},
		onReachBottom(){
			this.pageIndex++;
			console.log('下拉刷新',this.pageIndex);
			this.getList();
		},
		methods: {
			gomct(item){
				uni.navigateTo({
					url:'./personalcommodity?item='+encodeURIComponent(JSON.stringify(item))
				})
			},
			getList(){
				
				uni.getStorage({
					key:"user",
					success: (res) => {
						let _this=this;
						_this.userInfo=res.data.userInfo;
						console.log("看看储存用户信息："+res.data.userInfo.nickName);
						var openId = res.data.openId
						this.$axios({
							method:'POST',
							url:`/production/myProduction/${_this.pageIndex}`,
							params:{
								openId:openId,
								pageSize:_this.pageSize,
							}
						}).then(
							res =>{
								console.log(res.data);
								for(var i=0;i<res.data.length;i++){
									// console.log(res.data[i].productionName);
									var tmp={}
									tmp["id"]=res.data[i].id;
									tmp["coverImg"]=res.data[i].coverImg;
									tmp["price"]=res.data[i].price;
									tmp["productionName"]=res.data[i].productionName;
									//console.log(tmp["id"]);
									this.productionList.push(tmp);
								}
							}
						).catch(
							err =>{
								console.log(err);
							}
						)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.page{
	background: #eeeeef;
}
.head{
	width: 100%;
	height: 480upx;
	// background-color: #53C21D;
	overflow: hidden;
	font-family:"Hiragino Sans GB","PingFang SC";
	.ID_area{
		margin-top: 2%;
		text-align: center;
		width: 100%;
		display: flex;
		flex-direction: column;
		
	}
	.ava_area{
		height: 240upx;
		width: 240upx;
		margin-left: 34%;
		margin-top: 50upx;
		background-color: #ffffff;
		border-radius: 4%;
		border:1upx solid lightgray;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		.ava{
			width: 200upx;
			height: 200upx;
			margin-left: 20upx;
			margin-top: 20upx;
			border: 1upx solid #eeeeef;
			
		}
	}
}
.body{
	font-family:"Hiragino Sans GB","PingFang SC";
	border-top-left-radius: 40upx;
	border-top-right-radius: 40upx;
	width: 100%;
	background-color: #ffffff;
	overflow: hidden;
	border: 1upx solid #efefef;
	.stuff{
		width: 90%;
		height: 100%;
		// background-color: #acefb6;
		margin-left: 5%;
		overflow: hidden;
		display: flex;
		flex-wrap:wrap;
		justify-content: space-between;
		padding-bottom: 80upx;
		
		.stuffframe{
			width: 48%;
			height: 400upx;
			background-color: #eeeeef;
			margin-top: 4%;
			overflow: hidden;
			border-radius: 8upx;
			border:1upx solid lightgray;
			box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
			.introarea{
				width: 80%;
				margin-left: 10%;
				display: flex;
				justify-content: space-between;
				
				.price{
					color: red;
					font-weight: 820;
					}
				
				.comname{
					width: 60%;
					margin-top: 2%;
					font-size: 25upx;
					text-overflow: ellipsis;
					white-space:nowrap;
					overflow: hidden;
				}
			}
			.stuffimg{
				width: 92%;
				margin-left: 4%;
				height: 80%;
				margin-top: 4%;
				border-radius: 4%;
				border: 1upx solid #ffffff;
			}
		}
	}
	.introduce{
		text-align: center;
		margin-top: 20upx;
	}
	.lineintro{
		border-top: 1upx solid black;
		width: 60%;
		margin-left: 20%;
		margin-top: 10upx;
	}
}
</style>
